<template>
	<view class="pt18 column h100">
		<scroll-view scroll-y class="h100" :refresher-enabled="scrollViewTool.isEnabled"
			refresher-background="rgba(0,0,0,0)" :refresher-triggered="scrollViewTool.triggered"
			@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false"
			@refresherabort="triggered = false" @scrolltolower="reachBottom">
			<view class="" v-if="listData.length>0">
				<view class="detail-item" v-for="item in listData" :key="item.id">
					<view class="top">
						<text class="title">{{ item.cash_type_label }}</text>
						<text class="value value-out">-{{ item.money }}元</text>
					</view>
					<view class="bottom">
						<text class="money">变动前余额:{{ item.before_amount }}元</text>
						<text class="time">{{ item.create_time }}</text>
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view class="flex-1 hb centerV" v-else>
				<fr-empty-record />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		withdrawalRecord
	} from '@/api/user/index';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList';
	import {
		onLoad
	} from "@dcloudio/uni-app";
	const queryParams = ref({});
	const {
		listData,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} = useLoadPageList(withdrawalRecord, queryParams.value);
	onLoad(() => {
		reSetList()
	})
</script>

<style scoped lang="scss">
	.detail-item {
		background-color: #fff;
		padding: 26rpx 31rpx;
		box-sizing: border-box;
		margin-bottom: 22rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.value {
				font-weight: bold;
				font-size: 28rpx;
			}

			.value-out {
				color: #ff2121;
			}

			.value-in {
				color: #0759BB;
			}
		}

		.bottom {
			margin-top: 13rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #484848;

			.time {
				padding-bottom: 5rpx;
			}
		}
	}
</style>